<style type="text/css">
.global_form div.form-label {
    width: 100px;
}

#untangle{
    float: left;
}
#result{
    display: inline;
    float: left;
    margin-left: 10px;
    margin-top: 0;
    padding-top: 10px;
}
#result_icon{
    float: left;
    margin: 0px 5px; 
}
#result_text{
   display: inline;    
}
#preview{
    border: 1px solid #C6C8C6;
    font-weight: bold;
    margin-left: 117px;
    min-width: 100px;
    padding: 5px;
    text-align: center;
}
#untangle.disabled{
    background: none repeat scroll 0 0 #F2F2F2;
    color: #BBBBBB;
}

</style>

<div class="view-form">
<?php //echo $this->form->render($this) ?>

<!-- <div id="image"></div>-->
<form id="untalktangle" name="<?php echo $this->form->getAttrib('name');?>" enctype="multipart/form-data" action="<?php echo $this->escape($this->form->getAction()) ?>" method="<?php echo $this->escape($this->form->getMethod()) ?>" class="global_form">
    <div>
        <div>
            <h3>
                <?php echo $this->translate($this->form->getTitle()) ?>
            </h3>
            <?php if($this->untangle): ?>
                <p class="form-description"><?php echo $this->translate('This tangle was untangled already') ?></p>
            <?php else:?>
                <p class="form-description"><?php echo $this->form->getDescription() ?></p>
            <?php endif;?>
            
            <div class="form-elements">
                <?php echo $this->form->getDecorator('FormErrors')->setElement($this->form)->render("");?>
                <?php if($this->form->getDecorator('FormMessages')->getMessages()) echo $this->form->getDecorator('FormMessages')->setElement($this->form)->render('');?> 
                
                <div class="form-wrapper" id="talktangle-wrapper">
					<div class="form-element" id="talktangle-element">
                        <div id="preview"><?php echo $this->preview?></div>
					</div>
				</div>  
                              
                <?php echo $this->form->content; ?>

                <?php echo $this->form->untangle; ?>
         
                <?php echo $this->form->title; ?>
                <?php //echo $this->form->buttons; ?>
            </div>
         </div>
    </div>
</form> 
</div>

<script type="text/javascript">
    en4.core.runonce.add(function() {
//        $('submit').set('disabled','1');
//        $('submit').addClass('disabled');  
        <?php if($this->untangle): ?>
            $('untangle').set('disabled','1');
            $('untangle').addClass('disabled');   
        <?php endif;?>  
    });
    
    function cancelUntangle(){
        var href = en4.core.baseUrl + 'talktangle/';
        this.location.href = href;   
    }
    
    function unTangle(){
        var correct = $('title').get('value');
        var answer = $('content').get('value');
        if(!$('result')){
            var hint = new Element('div', {
                    'id' : 'result',
                    }).inject($('untangle'),'after');               
        }
               
        if(correct == answer){
            $('result').set('html', '<img id="result_icon" src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/markread.png' +'">Congratulation, your answer is correct');           
            $('untalktangle').submit();
        }
        else{
            $('result').set('html', '<img id="result_icon" src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/admin/referrers_clear.png' +'">Sorry, your answer is not correct');
            $('submit').set('disabled','1');
            $('submit').addClass('disabled');    
        }
    }
</script>